<?php
	$title_meta = '';
	include ("header.php");
?>

<div class="index">
	<ul>
		<!--<li class="hover" style="background: url(images/index_img1.jpg) 100% 100% no-repeat;">
			<a href="client_tpl.php">
			</a>
			<div class="mask"></div>
				<a href="" class="mask_text">
					<h1>慕斯</h1>
					<h2>趣做梦创非凡</h2>
					<p></p>
				</a>
		</li>
		<li class="text">
			<div class="index_move">
				<a href="company.php"><img src="images/index_text.png"/><p>橙盟整合营销传播</p></a>
				
			</div>
			<ul class="menu_mask ">
				<li>内容营销</li>
				<li>事件营销</li>
				<li>场景营销</li>
				<div class="clear"></div>
			</ul>
		</li>
		<li class="hover" style="background: url(images/index_img2.jpg)	 no-repeat;">
			<a href="client_tpl.php">
			</a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				<h1>美的智能冰箱</h1>
				<h2>“好食机”秋季推广</h2>
				<p></p>
			</a>
		</li>
		<li class="hover" style="background: url(images/index_img3.jpg) 100% 100% no-repeat;">
			<a href="client_tpl.php">
			</a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text client_a">
				<h1>寻找水密码启航仪式</h1>
				<p></p>
			</a>
		</li>-->
		<!--<li class="hover" style="background: url(images/index_img4.jpg) 100% 100% no-repeat;">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				<h1>美的冰箱</h1>
				<h2>小黄人社会化传播</h2>
				<p></p>
			</a>
		</li>
		<li class="hover" style="background: url(images/index_img5.jpg) 100% 100% no-repeat;">
			<a href="client_tpl.php"></a>
			<div class="mask"></div>
			<a href="client_tpl.php" class="mask_text">
				<h1>日立电梯（中国）</h1>
				<h2>20周年庆系列活动</h2>
				<p></p>
			</a>
		</li>-->
		<div class="clear"></div>
	</ul>
</div>

<script type="text/javascript">
      $(document).ready(function(){
        mainliWidth();
        $(window).resize(function(){
          mainliWidth();
        });
        function mainliWidth(){
        	var liw = $(".index .hover").width();
        	var lih = $(window).height()-130;
        	$(".index>ul>li").height(lih/2);
	        $(".index .mask").height(lih/2);
	        $(".index .mask_text").height(lih/2);
	        $(".index .hover>a").width(liw);
	        $(".index .hover>a").height(lih/2);
        }
        
      }); 

	
	$(document).ready(function(){
		$.ajax({
			type:"post",
			url:"./app/index.php?m=index&a=getTop",
			success:function(ret){
				var html = "";
				var i=0;
				var nowwid=$(window).width();
				console.log(nowwid);
				
				
				
				
//				for(var i in ret){
//					html+="<li class='hover' style='background: url(./app/data/upload/"+ret[i].cover+") 100% 100% no-repeat;'><a href='case.php?id="+ret[i].id+"'></a><div class='mask'></div><a href='case.php?id="+ret[i].id+"' class='mask_text'><h1> "+ret[i].post_brand+" </h1><h2>"+ret[i].post_title+"</h2><p></p></a></li>";
//				}
				for(var i in ret){
					html+="<li class='hover' style='background: url(./app/data/upload/"+ret[i].cover+") 0% 0% / 100% 100% no-repeat;'><a href='case.php?id="+ret[i].id+"'></a><div class='mask'></div><a href='case.php?id="+ret[i].id+"' class='mask_text'><h1> "+ret[i].post_brand+" </h1><h2>"+ret[i].post_title+"</h2><p></p></a></li>";
				}
//				var liw = $(".index .hover").width();
//      		var lih = $(window).height()-150;
				$(".index>ul").prepend(html);
				var liw = $(".index .hover").width();
	        	var lih = liw * 0.75;	
	        	$(".index>ul>li").height(lih);
		        $(".index .mask").height(lih);
		        $(".index .mask_text").height(lih);
		        $(".index .hover>a").width(liw-5);
		        $(".index .hover>a").height(lih);
				var index_text="<li class='text'><div class='index_move'><a href='about.php'><img src='images/index_text.png'/><p>橙盟整合营销传播</p></a></div><ul class='menu_mask '><li>内容营销</li><li>事件营销</li><li>场景营销</li><div class='clear'></div></ul></li>";
				 if(nowwid<=980){
		        	$(".index>ul").prepend(index_text);
		        	$(".index>ul>li:nth-child(1)").height(lih);
		        }else{
		        	$(".index>ul>li:nth-child(1)").after(index_text);
		        	$(".index>ul>li:nth-child(2)").height(lih);
		        }
			}
		});
	});    
    $(".index ul").on("mouseenter",".hover", function() {
		$(this).find(".mask").fadeOut(300);
		$(this).find(".mask_text").fadeOut(300);
 	});
     $(".index ul").on("mouseleave",".hover", function() {
		$(this).find(".mask").fadeIn(300);
		$(this).find(".mask_text").fadeIn(300);
 	});
 	 $(".index ul").on("mouseenter",".text", function() {
		$(this).find(".menu_mask").css("display","block");
 	});
     $(".index ul").on("mouseleave",".text", function() {
		$(this).find(".menu_mask").css("display","none");
 	});
 	
 	
</script>

<?php
	include ("footer.php");
?>